<script setup>
import {useNavStore} from "@/store/nav.js";
import {computed, ref, watch} from "vue";
import {useRouter} from "vue-router";
import {storeToRefs} from "pinia";

const navStore = useNavStore()

function handleClick(nav) {
    navStore.addNav(nav)
    navStore.setCurrentTab(nav.name)
}

const router = useRouter()

function removeTab(targetName) {
    navStore.removeTab(targetName)
}

const {currentTab, tabs} = storeToRefs(navStore)

function clickTab(t) {
    navStore.setCurrentTab(t.props.name)
}

watch(() => navStore.currentTab, (newVal, oldVal) => {
    router.push(newVal.path)
}, {deep: true})


</script>

<template>
    <el-header style="height: 50px">
        <el-row>
            <el-col :span="12">
                <div class="nav">
                    <Icon :icon="navStore.collapse? 'Fold' : 'Expand'" @click="navStore.setCollapse" class="myIcon"/>
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{path: nav.path}" v-for="nav in navStore.nav"
                                            @click="handleClick(nav)">{{ nav.name }}
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </el-col>
            <el-col :span="6" :offset="6">
                <el-image src="/api/images/avatar/default.png" class='logo'></el-image>
                <!--<img src="" alt="logo" class='logo'/>-->
            </el-col>
        </el-row>
        <el-row class="tabs">
            <el-tabs
                v-model="currentTab.name"
                type="card"
                closable
                @tab-remove="removeTab"
                @tab-click="clickTab"
            >
                <el-tab-pane class="tab"
                    v-for="item in tabs"
                    :key="item.name"
                    :label="item.title"
                    :name="item.name"
                />
            </el-tabs>
        </el-row>
    </el-header>
</template>

<style scoped>
.el-header {
    box-shadow: 1px 1px 2px 1px gray;
    margin: 0;
    padding: 0;
}

.logo {
    height: 50px;
}

.myIcon {
    width: 20px;
    margin: 0 20px;
}

.nav {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 20px;
    font-size: 16px;
}

.tabs {
    padding: 0 20px;
}

</style>